<template>
    <div
      @click="handelFocus"
      @mouseleave="handelBlue"
      @transitionend="handelTransitionEnd"
      class="date-picker-out-wrap"
      :class="{active: active, show: show}"
    >
      <input class="date-picker-input" v-model="keyWord" readonly placeholder="请选择日期"/>
      <div class="date-picker-wrap">
        <div class="date-picker-yea-wrap" :class="{active: showYeaList}">
          <div class="date-picker-title">
            <b @click="prevYea(10)"> << </b>
            <span>{{choseTime.yea}}</span>
            <b @click="nextYea(10)"> >> </b>
          </div>
          <ul>
            <li v-for="(item, index) in yeaList" :key="index" @click="setYea(item)">{{item}}</li>
          </ul>
        </div>
        <div class="date-picker-yea-wrap" :class="{active: showMonList}">
          <div class="date-picker-title">
          <b @click="prevYea()"> << </b>
            <span>{{choseTime.mon + 1}}</span>
          <b @click="nextYea()"> >> </b>
          </div>
          <ul>
            <li v-for="(item, index) in monList" :key="index" @click="setMon(item)">{{item}}</li>
          </ul>
        </div>
        <div>
          <div class="date-picker-title">
            <b @click="prevYea()"> << </b>
            <b @click="prevMon"> < </b>
            <span @click="showYeaList = true">{{choseTime.yea}}</span>
            <span @click="showMonList = true">{{choseTime.mon +1}}</span>
            <b @click="nextMon"> > </b>
            <b @click="nextYea()"> >> </b>
          </div>
          <ul>
            <li v-for="(item, index) in weekCharsList" :key="index">{{item}}</li>
          </ul>
          <div class="date-picker-wrap-other">
            <div v-for="(yea, index) in renderDate" :key="index">
              <ul v-for="mon in yea.list" :key="mon.num + yea.num + index">
                <li
                  v-for="(dat, index) in mon.list"
                  :key="index"
                  :class="{active: isDatChose(yea,mon, dat)}"
                  @click.stop="handelSelectCity(yea, mon, dat)"
                >
                  {{dat && dat.num}}
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
</template>

<script>
import timer from "../utils/timer"

function to00(num) {
  return (num > 9 ? "" : "0") + num;
}

function timeFormat(timeFormer, stamp = new Date()) {
  const week = "日一二三四五六";
  return timeFormer
    .replace("yea", stamp.getFullYear())
    .replace("mon", to00(stamp.getMonth() + 1))
    .replace("dat", to00(stamp.getDate()))
    .replace("day", week[stamp.getDay()])
}

function splitTimeStr(str = ``) {
  const [yea, mon, dat] = str.split(/[\/ -]/g);
  return {yea: yea * 1 || 0, mon: mon - 1 || 0, dat: dat * 1 || 0}
}

const weekChar = `日一二三四五六`;
const weekCharsList = weekChar.split(``);

export default {
  name: "DatePicker",
  components: {},
  data() {
    const today = new Date();
    const {renderConf = [today.getFullYear(), 1, [today.getMonth()]]} = this.conf;
    const renderDate = timer.getRenderList.apply(timer, renderConf);

    return {
      monList: new Array(12).fill(1).map((item, index) => item + index),
      yeaList: new Array(12).fill(201 * 10).map((item, index) => item - 1 + index),
      showYeaList: false,
      showMonList: false,
      renderDate,
      weekCharsList,
      keyWord: ``,
      active: false,
      show: false,
      choseTime: {yea: today.getFullYear(), mon: today.getMonth(), dat: today.getDate()}
    }
  },
  props: ["conf"],
  computed: {},
  created() {
    this.conf && this.conf.choseTime && (this.keyWord = this.conf.choseTime);
  },
  methods: {
    updateYeaList(){
      this.yeaList = new Array(12).fill(Math.floor(this.choseTime.yea / 10) * 10).map((item, index) => item - 1 + index)
    },
    prevYea(amount = 1){
      const {yea, mon, dat} = this.choseTime;
      this.keyWord = `${yea - amount}-${mon + 1}-${dat}`;
    },
    nextYea(amount = 1){
      const {yea, mon, dat} = this.choseTime;
      this.keyWord = `${yea + amount}-${mon + 1}-${dat}`;
    },
    prevMon(){
      const {yea, mon, dat} = this.choseTime;
      const nextMon = (mon + 12 - 1) % 12;
      const nextYea = mon - 1 < 0 ? yea - 1 : yea;
      this.keyWord = `${nextYea}-${nextMon + 1}-${dat}`;
    },
    nextMon(){
      const {yea, mon, dat} = this.choseTime;
      const nextMon = (mon + 1) % 12;
      const nextYea = mon + 1 > 11 ? yea + 1 : yea;
      this.keyWord = `${nextYea}-${nextMon + 1}-${dat}`;
    },
    updateRenderDate(){
      const {yea, mon} = this.choseTime;
      this.renderDate = timer.getRenderList.apply(timer, [yea, 1, [mon]]);
    },
    isDatChose(yeaT, monT, datT) {
      const {yea, mon, dat} = this.choseTime;
      return datT && yeaT.num === yea && monT.num === mon && datT.num === dat
    },
    setYea(val){
      this.setKeyWord("yea", val);
      this.showYeaList = false;
      this.showMonList = true;
    },
    setMon(val){
      this.setKeyWord("mon", val);
      this.showYeaList = false;
      this.showMonList = false;
    },
    setKeyWord(type, val){
      const {yea, mon, dat} = this.choseTime;
      this.keyWord = {
        yea: `${val}-${mon + 1}-${dat}`,
        mon: `${yea}-${val}-${dat}`
      }[type];
    },
    handelSelectCity(yea, mon, dat) {
      const selectDate = new Date(yea.num, mon.num, dat.num);
      const shallSelect = this.conf.onSelect && this.conf.onSelect(selectDate, timeFormat);
      this.keyWord = timeFormat(`yea-mon-dat 周day`, selectDate);
      this.handelBlue();
    },
    handelFocus() {
      this.show = true;
      setTimeout(() => this.active = true, 0)
    },
    handelBlue() {
      this.active = false;
    },
    handelTransitionEnd() {
      this.show = this.active;
    },
    setOtherCityAndsearchList() {
      this.choseTime = splitTimeStr(this.keyWord);
      this.updateYeaList();
    },
  },
  watch: {
    keyWord() {
      this.setOtherCityAndsearchList();
      this.updateRenderDate();
    },
    "conf.choseTime"() {
      this.conf && this.conf.choseTime && (this.keyword = this.conf.choseTime)
    }
  }
}
</script>
<style scoped>
  .date-picker-yea-wrap {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 100;
    text-align: center;
  }
  .date-picker-yea-wrap.active{
    display: block;
  }
  .date-picker-yea-wrap > ul {
    display: flex;
    border-top: 1px dashed #eee;
    flex-wrap: wrap;
  }

  .date-picker-yea-wrap > ul > li {
    flex: 0 0 25% !important;
    line-height: 60px !important;
    background-color: #fff;
    border-radius: 4px;
  }

  .date-picker-yea-wrap > ul > li:hover {
    background-color: red;
    color: #fff;
  }

  .date-picker-title {
    display: flex;
    text-align: center;
    line-height: 40px;
  }

  .date-picker-title > span {
    flex: 1 1 0;
  }

  .date-picker-title > b {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0 4px;
  }

  .date-picker-title > span,
  .date-picker-title > b {
    cursor: pointer;
  }

  .date-picker-title > span:hover,
  .date-picker-title > b:hover {
    color: #3c91ca;
  }

  .date-picker-out-wrap {
    height: 100%;
    position: relative;
  }
  .date-picker-out-wrap.show,
  .date-picker-out-wrap.active{
    z-index: 2;
  }
  .show > .date-picker-wrap {
    display: block;
    height: auto;
  }

  .active > .date-picker-wrap {
    opacity: 1;
  }

  .date-picker-wrap {
    position: absolute;
    padding-top: 10px;
    top: 100%;
    right: -1px;
    width: 280px;
    height: 0;
    display: none;
    opacity: 0;
    transition: all .3s;
  }

  .date-picker-wrap > div {
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    line-height: 24px;
    border-radius: 4px;
    background-color: #fff;
    text-align: left;
    padding: 4px 10px;
    overflow-y: scroll;
    box-shadow: 0 6px 6px rgba(0, 0, 0, .1);
  }

  .date-picker-wrap > div::-webkit-scrollbar {
    display: none;
  }

  .date-picker-wrap > div > ul {
    position: relative;
    min-height: 39px;
    padding: 4px;
    border-bottom: 1px dashed #f0f0f0;
    display: flex;
  }

  .date-picker-wrap-other > div > ul > li,
  .date-picker-wrap > div > ul > li {
    flex: 0 0 14%;
    text-align: center;
    line-height: 26px;
    border-radius: 4px;
    cursor: pointer;
  }

  .date-picker-wrap-other > div > ul > li.active {
    background-color: red;
    opacity: .8;
    color: #fff;
  }

  .date-picker-wrap-other > div > ul > li:hover {
    background-color: red;
    opacity: .8;
    color: #fff;
  }

  .date-picker-wrap-other > div > ul > li.active:hover {
    opacity: 1;
  }

  .date-picker-wrap-other {
    overflow: scroll;
    height: 200px;
  }

  .date-picker-wrap-other::-webkit-scrollbar {
    display: none;
  }

  .date-picker-wrap-other > div {

  }

  .date-picker-wrap-other > div > ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px dashed #f8f8f8;
    transition: all .5s;
    background-color: #fff;
  }

  .date-picker-wrap-other > div > ul.active {
    position: relative;
    width: 100%;
    padding: 4px;
    padding-left: 30px;
    border-bottom: 1px dashed #f8f8f8;
    transform: translateX(0);
    transition: all .3s;
    z-index: 1;
  }
  .date-picker-out-wrap input.date-picker-input{
    line-height: 24px;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #c9c9c9;
    transition: all .3s;
  }
  .date-picker-out-wrap input.date-picker-input:hover{
    border: 1px solid rgba(60, 145, 202, 1);
    box-shadow: 0 3px 6px rgba(60, 145, 202, .3);
  }
  .form-item.wholeLine .date-picker-out-wrap{
    flex: 1 1 0;
  }
  .form-item.wholeLine .date-picker-out-wrap input.date-picker-input{
    width: 100%;
  }
  .date-picker-wrap-other > div > ul > div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px 4px;
    line-height: 26px;
  }
</style>
